<template>
	<view class="page">
		<!-- <image class="img" src="../../static/images/banner.png"></image> -->
		<view class="tex">
			创建群组
		</view>
		<view class="frist_table">
			<view class="frist_content">
				<view class="tab">
					<view class="tr">群组名称:</view>
					<input type="text" class="te" v-model="name" />
				</view>
				<picker @change="bindPickerChange" :value="index" :range="array">
					<view class="tab">
						<view class="tr">群组类型:</view>
						<view class="tb1" v-if="start =='请选择'">{{start}}</view>
						<view class="tb" v-if="start !='请选择'">{{array[index]}}</view>
					</view>
				</picker>
			</view>
		</view>
		<view class="second_table">
			<view class="second_content">
				<view class="hr">
					<view class="tr">上传图片：</view>
				</view>
				<view class="addimg">
					<view class="icon" @click="upImg(0)">
						<view v-if="avatarUrl==''">
							<image src='../../static/images/head_img.jpg'></image>
						</view>
						<view v-if="avatarUrl!=''">
							<image :src="avatarUrl_s"></image>
						</view>
						<view>会标</view>
					</view>
					<view class="icon" @click="upImg(1)">
						<view v-if="bg_img==''">
							<image src='../../static/images/bg_img.jpg'></image>
						</view>
						<view v-if="bg_img!=''">
							<image :src="bg_img_s"></image>
						</view>
						<view>背景</view>
					</view>
				</view>
			</view>
		</view>
		<view class="third_table">
			<view class="frist_content"></view>
			<view class="hr">
				<view class="tr">校友会简介 </view>
			</view>
			<view class="miaosu">
				<textarea class="ty" v-model="brief" placeholder="..."></textarea>
			</view>
		</view>
		<view class="tt">
			<button class="clik" @click="toBeforPage">取消</button>
			<button class="clik2" @click="btn">创建</button>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	export default {
		data() {
			return {
				start: '请选择',
				array: ['行业校友会', '地方校友会', '院系校友会'],
				index: 0,
				avatarUrl: '', //校友会会徽地址
				bg_img: '', //校友会背景地址
				avatarUrl_s: '', //校友会会徽地址
				bg_img_s: '', //校友会背景地址
				url: '',
				name: '', //校友会名称
				brief: '', //校友会描述
				data: {}
			}
		},
		computed:{
		   ...mapState(['nickName', 'openid', 'token', 'userId'])
		},
		onLoad() {
			this.url = app.globalData.Link + "upload/图片/";
		},
		methods: {
			toBeforPage() {
				uni.navigateBack();
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
				this.start = e.target.value
			},
			//创建校友会
			btn() {
				var that = this;
				if (that.name == '') {
					uni.showToast({
						title: '请输入校友会名字！',
						icon: 'none'
					});
					return false;
				} else if (that.brief == '') {
					uni.showToast({
						title: '请输入校友会简介！',
						icon: 'none'
					});
					return false;
				} else {
					uni.request({
						url: app.globalData.URL + 'association',
						data: {
							name: that.name,
							type: that.index,
							brief: that.brief,
							avatarUrl: that.avatarUrl,
							bgImg: that.bg_img,
							userId: that.userId,
							/* 暂时传这个 userID*/
						},
						header: {
							'content-type': 'application/json;charset=UTF-8' // 默认值
						},
						method: 'POST',
						success: res => {
							that.data = res.data;
							console.log("后台传来的", res.data);
							console.log("hduhcuh", that.data.name);
							if (that.data.name != null) {
								uni.showToast({
									icon: "none",
									title: '创建成功！',
									duration: 2000
								});
								setTimeout(function() {
									uni.navigateBack();
								}, 2000)

							} else {
								uni.showToast({
									icon: "none",
									title: '创建失败！',
									duration: 2000
								});
							}
						}
					})
				}

			},
			//上传图片
			upImg(type) {
				console.log("type=", type);
				var that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: app.globalData.URL + 'imgUpload/upload',
							filePath: tempFilePaths[0],
							name: 'multipartFile',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								var datas = JSON.parse(uploadFileRes.data);
								if (datas.errno == 0) {
									if (type == 0) {
										that.avatarUrl = datas.data[0];
										that.avatarUrl_s = that.url + datas.data[0];
									} else {
										that.bg_img = datas.data[0];
										that.bg_img_s = that.url + datas.data[0];
									}
								} else {
									uni.showToast({
										title: '图片上传失败了！',
										icon: 'none'
									});
								}
								console.log("看看赋值是否成功", that.avatarUrl)
							}
						});
					}
				});
			}
		},
	}
</script>

<style>
	.page {
		width: 100vw;
		height: 100vh;
		background-color: #F8F8F8;
	}

	.frist_table {
		background-color: white;
		border-radius: 15rpx;
		height: 230rpx;
		margin: 20rpx 20rpx;
	}

	.frist_content {
		padding-top: 10rpx;
	}

	.second_table {
		background-color: white;
		border-radius: 15rpx;
		height: 330rpx;
		margin: 0rpx 20rpx;
	}

	.second_content {
		padding-top: 15rpx;

	}

	.icon {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 15rpx;
	}

	.third_table {
		background-color: white;
		border-radius: 15rpx;
		height: 305rpx;
		margin: 20rpx 20rpx;
	}

	/* 添加照片 */
	.addimg {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-bottom: 0.1px solid #F8F8F8;
		margin-left: 60rpx;
		width: 600rpx;
		color: rgb(187, 187, 187);

	}

	/* .aadimg view {
		border: solid 0.02rpx #F8F8F8;
		background-color: #007AFF;
		height: 160rpx;
		width: 160rpx;
	} */
	.imgadd {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 59rpx;
	}

	.add {
		margin-top: 40rpx;
		width: 100%;
		display: flex;
		background-color: #fff;
		height: 160rpx;
	}

	.addimg image {
		width: 160rpx;
		height: 160rpx;
		border: solid 0.05rpx #F8F8F8;
	}

	.zk {
		padding-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.miaosu {
		display: flex;
		justify-content: space-around;
	}

	.img1 {
		width: 200rpx;
		height: 200rpx;
	}

	.img {
		height: 250rpx;
		width: 100%;
	}

	.tex {
		text-align: center;
		color: #808080;
		font-size: 50rpx;
		border: #007AFF;
		height: 60rpx;
		margin-top: 5rpx;
		margin: 0px 8px;
		padding-bottom: 35rpx;
	}

	.tr {
		height: 70rpx;
		font-size: 35rpx;
		color: #636363;
		align-items: center;
		margin-right: 10rpx;

	}

	.tab {
		display: flex;
		border-bottom: 0.1px solid #F8F8F8;
		text-align: left;
		margin: 16rpx 35rpx;
		/* width: 630rpx; */
	}

	.tab1 {
		display: flex;
		border-bottom: 0.1px solid #F8F8F8;
		align-items: left;
		margin: 8px 8px;
		height: 170rpx;
	}

	.clik {
		width: 200rpx;
		color: #555555;
	}

	.clik2 {
		width: 200rpx;
		color: #FFFFFF;
		background-color: #007AFF;
	}

	.tt {
		display: flex;
		margin-top: 60rpx;
	}

	.ty {
		/* background-color: #F1F1F1; */
		height: 200rpx;
		width: 650rpx;
		border-radius: 5rpx;
		/* border: solid 1rpx #007AFF; */
		background-color: #F8F8F8;


	}

	.hr {
		display: flex;
		margin-left: 35rpx;
	}

	.imga {
		margin-top: 10rpx;
	}

	.te {
		text-align: left;
		vertical-align: middle;
		margin-bottom: 25rpx;
	}

	.tb {
		margin-bottom: 25rpx;
		text-align: left;
		vertical-align: middle;
	}

	.tb1 {
		color: rgb(187, 187, 187);
		margin-bottom: 25rpx;
		text-align: left;
		vertical-align: middle;
	}
</style>
